<template>
  <view class="view-person">
    <nut-popup
      position="bottom"
      round
      :style="{ height: '86%' }"
      v-model:visible="state.isVisible"
    >
      <view class="popup-person-con">
        <view class="popup-con-box">
          <view
            class="popup-con-title"
            v-if="!props.isDetail"
          >
            <view
              class="popup-cancel"
              @click="cancel"
              >取消</view
            >
            <view class="popup-title">选择关联任务</view>
            <view
              class="popup-confirm"
              @click="confirmRelatedtasks"
              >确定</view
            >
          </view>
          <view class="popup-view-person">
            <view class="history-search-title">
              <view class="history-search-title-date">
                <view
                  class="title-date"
                  @click="openSwitch('isTimeVisible')"
                >
                  <text>时间筛选<i class="iconfont icon-daosanjiao"></i></text>
                  <!--  -->
                  <text>日期范围：{{ state.date[0].substring(5, 10) }} 至 {{ state.date[1].substring(5, 10) }}</text>
                </view>
              </view>
              <view class="history-search-title-search">
                <nut-searchbar
                  v-model="promoter"
                  placeholder="发起人"
                  @change="searchbarInput"
                >
                  <template v-slot:leftin>
                    <i
                      class="iconfont icon-sousuo"
                      style="font-size: 20px"
                    ></i>
                  </template>
                </nut-searchbar>
              </view>
            </view>
            <view class="related-task-list">
              <view class="related-task-list-con">
                <view class="related-task-list-item">
                  <view class="related-task-title">
                    <text>我发起的</text>
                  </view>
                  <view
                    class="related-item-con"
                    v-for="(item, index) in myTaskPermissionList"
                    :key="index"
                  >
                    <nut-checkbox
                      v-model="item.checked"
                      @change="taskPermissionChecked(item)"
                    >
                      <view class="con-text">
                        <view class="con-text-title">
                          <view class="con-title-name">{{ item.title }}</view>
                          <view class="con-title-time">截止{{ item.finishTime?.substring(5, 10) }}</view>
                        </view>
                        <view class="con-text-user">
                          <text>负责人</text>
                          <view class="con-text-user-img">
                            <nut-avatar-group
                              max-count="3"
                              zIndex="right"
                              max-content=" "
                              size="small"
                            >
                              <nut-avatar
                                v-for="(itm, idx) in item.responsible"
                                :key="idx"
                                size="small"
                              >
                                <img
                                  :src="itm.avatarUrl"
                                  alt=""
                                />
                              </nut-avatar>
                            </nut-avatar-group>
                            <text v-if="item.responsible.length == 1">{{ item.responsible[0].nickName }}</text>
                            <text v-else>{{ item.responsible ? item.responsible.length : 0 }}人负责</text>
                          </view>
                        </view>
                        <view class="con-text-times">
                          <text>我发起的</text>
                          <nut-divider
                            direction="vertical"
                            :style="{ color: '#999' }"
                          />
                          <text>{{ item.createdTime.substring(5, 16) }}</text>
                        </view>
                      </view>
                    </nut-checkbox>
                  </view>
                </view>
                <view class="related-task-list-item">
                  <view class="related-task-title">
                    <text>其他公开任务</text>
                  </view>
                  <view
                    class="related-item-con"
                    v-for="(item, index) in otherTaskPermissionList"
                    :key="index"
                  >
                    <nut-checkbox
                      v-model="item.checked"
                      @change="taskPermissionChecked(item)"
                    >
                      <view class="con-text">
                        <view class="con-text-title">
                          <view class="con-title-name"
                            >{{ item.title
                            }}<text style="padding-left: 15rpx">{{ statusList[item.priorityLevel - 1] }}</text></view
                          >
                          <view class="con-title-time">截止{{ item.finishTime?.substring(5, 10) }}</view>
                        </view>
                        <view class="con-text-user">
                          <text>负责人</text>
                          <view class="con-text-user-img">
                            <nut-avatar-group
                              zIndex="right"
                              max-content=" "
                              size="small"
                            >
                              <nut-avatar
                                v-for="(itm, idx) in item.responsible"
                                :key="idx"
                                size="small"
                              >
                                <img
                                  :src="itm.avatarUrl"
                                  alt=""
                                />
                              </nut-avatar>
                            </nut-avatar-group>
                            <text v-if="item.responsible.length == 1">{{ item.responsible[0].nickName }}</text>
                            <text v-else>{{ item.responsible ? item.responsible.length : 0 }}人负责</text>
                          </view>
                        </view>
                        <!-- <view class="con-text-times">
                          <text>我发起的</text>
                          <nut-divider direction="vertical" />
                          <text>11月18日 15:06</text>
                        </view> -->
                      </view>
                    </nut-checkbox>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </nut-popup>
    <calendars
      @update:timeVisible="timeVisible"
      :isTimeVisible="isTimeVisible"
      @update:date="getDate"
    />
  </view>
</template>

<script setup lang="ts">
import { reactive, watch, ref, onMounted } from "vue";
import Taro from "@tarojs/taro";
import { userInfoStore } from "@/stores/userInfoStore";
import { getSystemtaskList } from "@/api/index";
import calendars from "@/components/calendar/index.vue";
import { getCurrentWeekRange } from "@/utils/utils";
const store = userInfoStore();
const emit = defineEmits(["update:visible", "selecteList", "update:timeVisible"]);
const props = defineProps(["isRelatedtasksPopup", "feedbackTasks", "isDetail"]);
const selectedLists = ref([]);
const promoter = ref("");
const myTaskPermissionList = ref([]);
const otherTaskPermissionList = ref([]);
const isTimeVisible = ref(false);
const { startDate, endDate } = getCurrentWeekRange();
const checkbox1 = ref(false);
const statusList = ref(["S级", "A级", "B级"]);
const state = reactive({
  isVisible: props.isRelatedtasksPopup,
  date: [startDate, endDate],
});
watch(
  () => props.isRelatedtasksPopup,
  newVal => {
    state.isVisible = newVal;
    handleTaskPermissionList("my");
    handleTaskPermissionList("other");
  },
);
watch(
  () => props.feedbackTasks,
  val => {
    selectedLists.value = val;
  },
);
watch(
  () => state.isVisible,
  val => {
    emit("update:visible", val);
  },
);
// 多选改单选
const taskPermissionChecked = item => {
  console.log("6666", myTaskPermissionList.value);
  if (item.checked) {
    myTaskPermissionList.value.map(i => {
      // item.userId除外的其他checked为false,选中的为true
      if (i.taskId != item.taskId) {
        i.checked = false;
      }
    });
  } else {
    return;
  }
  if (item.checked) {
    otherTaskPermissionList.value.map(i => {
      // item.userId除外的其他checked为false,选中的为true
      if (i.taskId != item.taskId) {
        i.checked = false;
      }
    });
  } else {
    return;
  }
};
// 获取日期起止
const getDate = val => {
  state.date = val;
};
const timeVisible = val => {
  isTimeVisible.value = val;
};
//
const openSwitch = param => {
  isTimeVisible.value = true;
};
// 查询
const searchbarInput = () => {
  handleTaskPermissionList(2);
};
// 获取列表
const handleTaskPermissionList = async type => {
  // meetingState: 2,
  let params = {
    visibleScope: type == "other" ? 2 : "",
    title: promoter.value,
    startDate: state.date[0],
    endDate: state.date[1],
  };
  await getSystemtaskList(params).then(res => {
    let rows = res.rows;
    if (type == "my") {
      myTaskPermissionList.value = rows.filter(i => i.userId == Taro.getStorageSync("user").userId);
      myTaskPermissionList.value.map(i => {
        i.checked = false;
      });
    }
    if (type == "other") {
      otherTaskPermissionList.value = rows.filter(i => i.userId != Taro.getStorageSync("user").userId);
      otherTaskPermissionList.value.map(i => {
        i.checked = false;
      });
    }
  });
};

const confirmRelatedtasks = () => {
  let newMyTaskList = myTaskPermissionList.value.filter(i => i.checked == true);
  newMyTaskList = JSON.parse(JSON.stringify(newMyTaskList));
  let newOtherTaskList = otherTaskPermissionList.value.filter(i => i.checked == true);
  newOtherTaskList = JSON.parse(JSON.stringify(newOtherTaskList));
  if (!newMyTaskList.length && !newOtherTaskList.length) {
    Taro.showToast({
      title: "请选择至少一条关联任务",
      icon: "none",
    });
    return;
  }
  selectedLists.value = [...newMyTaskList, ...newOtherTaskList];
  emit("selecteList", selectedLists.value);
  state.isVisible = false;
};

const cancel = () => {
  state.isVisible = false;
  emit("update:visible", false);
};
</script>

<style lang="less">
@import "./index.less";
</style>
